<template>
  <div style="min-height: 56rem">
    <!--  style="background-image: url(/static/img/index/top_banner.jpg); height: 30rem" -->
    <div class="shadowed relative bg-covered">
      <img src="/static/img/icon/homepage_bg.jpg" class="img-fluid">
    </div>
    <div class="container container-small bg-white rad-3" style="margin-top: -1.5rem">
      <div class="d-flex mb-3 teacher-wrap">
        <img :src="info.imgUrl || '/static/img/index/pic_jszx.png'" class="teacher-avatar" alt="老师的头像">
        <div class="my-3 pt-4 ml-3 w-75">
          <h4 class="text-white">{{info.pname}}</h4>
          <div class="mt-4 pr-3 pointer" :class="{'line-clamp': unfold}" @click="unfold=!unfold">{{info.introduce}}</div>
          <div class="mt-2" v-if="info.cityName">常驻地： {{info.cityName}}</div>
        </div>
      </div>
      <div class="text-black intro-row  px-3">
        <div class="bt-eee d-flex py-3" v-if="info.cooperationCourses!=null" @click="showModal(info.cooperationCourses,'主要课程')">
          <div class="px-3">
            <img src="/static/img/icon/homepage_icon_zykc.png" alt="" class="icon-categrory">
          </div>
          <div class="line-clamp-mobile ">{{info.cooperationCourses}}</div>
        </div>
        <div class="bt-eee d-flex py-3" v-if="info.serviceCustomer!=null" @click="showModal(info.serviceCustomer,'服务客户')">
          <div class="px-3">
            <img src="/static/img/icon/homepage_icon_fwkh.png" alt="" class="icon-categrory">
          </div>
          <div class="line-clamp-mobile ">{{info.serviceCustomer}}</div>
        </div>
        <div class="bt-eee d-flex py-3" v-if="info.professionalBackground" @click="showModal(info.professionalBackground,'专业背景')">
          <div class="px-3">
            <img src="/static/img/icon/homepage_icon_zybj.png" alt="" class="icon-categrory">
          </div>
          <div class="line-clamp-mobile ">{{info.professionalBackground}}</div>
        </div>说来
        <div class="bt-eee d-flex py-3" v-if="info.teachingStyle" @click="showModal(info.teachingStyle,'授课风格')">
          <div class="px-3">
            <img src="/static/img/icon/homepage_icon_skfg.png" alt="" class="icon-categrory">
          </div>
          <div class="line-clamp-mobile ">{{info.teachingStyle}}</div>
        </div>
        <div class="bt-eee d-flex py-3" v-if="info.actualExperience" @click="showModal(info.actualExperience,'实战经验')">
          <div class="px-3">
            <img src="/static/img/icon/homepage_icon_szjy.png" alt="" class="icon-categrory">
          </div>
          <div class="">{{info.actualExperience}}</div>
        </div>
      </div>
    </div>
    <div class="container container-small mt-4 px-0 small-x-0" v-show="courses.list && courses.list.length != 0 ">
      <h6 class="bl-red py-1 pl-2 mb-2">近期公开课</h6>
      <div class="mb-4 mx-0 px-0 mx-0">
        <div class="item-row  px-0">
          <div class="item-block p-0 of-hidden" v-for="item in row ">
            <a :href="link+item.coursesID+'-'+ item.editionID+'-'+item.beginsID +'-'+item.pricingId+'.html'" class="item-bg cover" target="_blank"
               :style="{backgroundImage: 'url(' + (item.imgURL || '/static/img/index/pic_yyzh.png') + ')'}">
              <span class="form" v-if="item.studyForm==1">在线学习</span>
            </a>
            <div class="px-3 py-2 relative">
              <div class="item-title line-clamp">{{item.title}}</div>
              <div class="flex-center text-grey my-2"><span>主讲:{{item.speakerNames}} </span></div>
              <div class="flex-center text-grey mt-2"><span>时间:{{item.beginsBeginDate}} 至 {{item.beginsEndDate}}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade bg" ref="modal" role="dialog" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="text-center text-muted mx-2 p-3 bb-eee">
            {{modalHeader}}
          </div>
          <div class="modal-body">
            {{modalText}}
          </div>
          <div class="text-center">
            <span class="close-btn" @click="modal.hide()">
              <i class="fa fa-close"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<!--
  讲师中心
-->
<script>
  import {Teachers} from '../resources'
  import {Modal} from '../misc/utils'

  export default {
    name: 'teacherInfo',
    data: () => ({
      info: {},
      courses: {
        list: []
      },
      modal: 0,
      link: 'http://www.xuehu365.com/CoursesInfo/',
      modalHeader: {},
      modalText: {},
      unfold: true
    }),
    methods: {
      showModal (modalText,modalHead) {
        this.modalText = modalText
        this.modalHeader = modalHead
        this.modal.show()
      }
    },
    mounted () {
      this.modal = new Modal(this.$refs.modal)
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        Teachers.get(to.params.id).then(response => {
          vm.info = response.data.data;
          vm.$nextTick(() => vm.$emit('loaded'))
        });

        Teachers.courses(to.params.id).then(res => {
          vm.courses = res.data.data;
          vm.courses.list = vm.courses.list.map(e => {
            e.beginsBeginDate = e.beginsBeginDate ? e.beginsBeginDate.substring(0, 9) : ''
            e.beginsEndDate = e.beginsEndDate ? e.beginsEndDate.substring(0, 9) : ''
            e.speakerNames = e.speakerNames ? e.speakerNames.slice(0, 1).join(',') : ''
            return e
          })
        })
      })

    },
    beforeRouteUpdate (to, from, next) {
      this.$nextTick(() => this.$emit('loaded'))
      next()
    },
    computed: {
      row () {
        return this.courses.list ? this.courses.list.slice(0, 3) : []
      }
    }
  }

</script>

<style>
  .teacher-avatar {
    border: 4px solid #fff;
    border-radius: 50%;
    width: 9rem;
    height: 9rem
  }
  .nav-tabs .nav-link {
    color: #333;
    padding: 1rem 2.5rem;
  }
  .nav-link.active {
    color: #e50011 !important;
  }
  .icon-number {
    width: 12px;
    height: 12px;
    background-image: url("/static/img/index/courselist_icon_number.png");
    margin-right: 5px;
  }
  .course-title {
    height: 50px; color: #000000
  }
  .study-style {
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
  .study-form {
    padding: 2px 5px;
    color: #FFFFFF;
    min-width: 80px;
    text-align: center
  }
  .study-address {
    left: 0px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
  }
  .course {
    height: 8.5652rem;
  }
  .icon-add {
    width: 12px;
    height: 14px;
    background-image: url("/static/img/index/course_icon_add.png");
    margin-right: 2px;
  }
  .intro-row .card {
    min-height: 15.625rem;
  }
  .gkk-row .card-content:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2)
  }
  .gkk-row .card-content > a > div {
    width: 92%;
  }
  .intro-row .card-block {
    min-height: 8.75rem
  }
  .card-header {
    background-color: #FFFFFF !important;
  }
  .teacher-wrap {
    margin-top: -5rem;
  }
  .icon-categrory {
    width: 3rem;
  }
  .bl-red {
    border-left: 3px solid #e62233;
  }
  .close-btn {
    display: inline-block;
    width: 2.8rem;
    height: 2.8rem;
    line-height: 2.6rem;
    border: 1px solid #bfbfbf;
    border-radius: 50%;
    margin-bottom: 1rem;
    color: #bfbfbf;
  }
  .modal.bg{background-color: rgba(0,0,0,0.5);}
</style>